<template>
  <div>toRefs的使用</div>
  <!-- <h3>state:{{state}}</h3>
  <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->

  <h3>name:{{ name }}</h3>
  <!-- <h3>age:{{ age }}</h3> -->
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue'
function useFeatureX() {
  const state = reactive({
    name: '我很棒',
    age: 12
  })
  return {
    ...toRefs(state)
  }
}
export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      name: '我很棒',
      age: 12
    })
    // toRefs可以把一个响应式对象转换成普通对象，该普通对象的每一个property都是一个ref
    // const state2 = toRefs(state)
    // const { name, age } = toRefs(state)
    //定时器，更新数据，(如果数据变化了，界面也会随之变化，肯定是响应式的数据)
    setInterval(() => {
      // state.name += '==='
      // state2.name.value += '====='
      console.log("==========");

    }, 1000)

    // const { name, age } = useFeatureX(state)
    return {
      // state
      // 下面的方式是不行的
      // ...state  //不是响应式数据了------>(name:'自来也',age:12)
      // ...state2  toRefs返回来对象
      name,
      // age

    }
  }
})
</script>